<template>
    <div class="notification-badge" v-if="unreadCount > 0">
      <span class="badge-count">{{ unreadCount }}</span>
    </div>
  </template>
  
  <script setup>
  import { ref, computed } from 'vue';
  import { useNotificationStore } from '@/store/modules/notification'; 
  
  const notificationStore = useNotificationStore();
  const unreadCount = computed(() => notificationStore.unreadCount);
  </script>
  
  <style scoped>
  .notification-badge {
    position: relative;
  }
  
  .badge-count {
    position: absolute;
    top: -6px;
    right: -6px;
    background-color: #ff4d4f;
    color: #fff;
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 50%;
    line-height: 1;
  }
  </style>